<template>
  <div class="upload-view-container">
    <!-- 顶部菜单 -->
    <el-menu
      :default-active="activeIndex"
      class="el-menu-demo"
      mode="horizontal"
      @select="handleSelect"
    >
      <el-menu-item index="note">发布游记</el-menu-item>
      <el-menu-item index="disaster">发布灾害</el-menu-item>
      <el-menu-item index="secondhand">发布二手</el-menu-item>
    </el-menu>

    <!-- 内容区域 -->
    <div class="content-container">
      <router-view></router-view>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, computed, onMounted } from 'vue';
import { useRouter, useRoute } from 'vue-router';

const router = useRouter();
const route = useRoute();

// 根据当前路由计算活动菜单项
const activeIndex = computed(() => {
  const path = route.path;
  if (path.includes('/note')) return 'note';
  if (path.includes('/disaster')) return 'disaster';
  if (path.includes('/secondhand')) return 'secondhand';
  return 'note'; // 默认选中游记
});

// 处理菜单选择
const handleSelect = (key: string) => {
  router.push(`/platform/upload/${key}`);
};

// 初始化时如果是根路径，重定向到默认页面
onMounted(() => {
  if (route.path === '/platform/upload') {
    router.push('/platform/upload/note');
  }
});
</script>

<style lang="less" scoped>
.upload-view-container {
  background: #fff;
  
  .el-menu-demo {
    display: flex;
    justify-content: center;
    border-bottom: 1px solid #ebeef5;
  }
  
  .content-container {
    width: 100vw;
    margin: 20px auto;
    min-height: 100vh;
  }
}
</style>
